<template>
    <div class="app-container">
        <el-form
            ref="queryParamsRef"
            :model="queryParams"
            label-position="left"
            label-width="auto"
        >
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-row :gutter="24">
                        <el-col :span="15">
                            <el-form-item label="办案单位：" label-width="82" prop="unitId">
                                <DepartmentCascader v-model="queryParams.unitId" placeholder="请选择办案单位"
                                                    @change="searchHandle"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="含下级：" label-width="72">
                                <el-tooltip content="是否包含下级单位">
                                    <el-switch v-model="childUnitId" :disabled="!queryParams.unitId"
                                               @change="childUnitIdSearchHandle"/>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="办案部门：" prop="depId">
                        <el-select
                            v-model="queryParams.depId"
                            clearable
                            placeholder="请选择办案部门"
                            @change="searchHandle"
                        >
                            <el-option
                                v-for="item in BAApplydepList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="所属职能部门：" prop="dutyDept">
                        <el-select
                            v-model="queryParams.dutyDept"
                            clearable
                            placeholder="请选择所属职能部门"
                            @change="searchHandle"
                        >
                            <el-option
                                v-for="item in nj_total_by"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="承办人：" prop="askerName">
                        <el-input v-model="queryParams.askerName" placeholder="请输入承办人"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="办案区类型：" prop="type">
                        <el-select
                            v-model="queryParams.type"
                            clearable
                            placeholder="请选择办案区类型"
                            @change="searchHandle"
                        >
                            <el-option
                                v-for="item in nj_policearea_type"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="案件名称：" prop="caseName">
                        <el-input v-model="queryParams.caseName" placeholder="请输入案件名称"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="案件类别：" prop="caseType">
                        <el-select
                            v-model="queryParams.caseType"
                            clearable
                            placeholder="请选择案件类别"
                            @change="searchHandle"
                        >
                            <el-option
                                v-for="item in nj_anjian_type"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="涉案人：" prop="userName">
                        <el-input v-model="queryParams.userName" placeholder="请输入涉案人"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="实际进入时间：">
                        <el-date-picker
                            v-model="searchTime"
                            end-placeholder="截止时间"
                            range-separator="-"
                            start-placeholder="开始时间"
                            type="daterange"
                            unlink-panels
                            value-format="YYYY-MM-DD"
                            @change="changeDateTimerHandle"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="使用明细：" prop="roomId">
                        <!--                        <el-select-->
                        <!--                            v-model="queryParams.roomId"-->
                        <!--                            placeholder="选择状态"-->
                        <!--                            clearable-->
                        <!--                        >-->
                        <!--                            <el-option-->
                        <!--                                v-for="item in roomList"-->
                        <!--                                :key="item.value"-->
                        <!--                                :label="item.label"-->
                        <!--                                :value="item.value"-->
                        <!--                            />-->
                        <!--                        </el-select>-->
                        <el-input v-model="queryParams.roomId" placeholder="请输入使用明细"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="执勤法警：" prop="roomCheckId">
                        <el-input v-model="queryParams.roomCheckId" placeholder="请输入执勤法警"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6" style="display: flex;justify-content: space-between;">
                    <!--                    <el-form-item label="状态：" prop="state">-->
                    <!--                        <el-select-->
                    <!--                            v-model="queryParams.state"-->
                    <!--                            placeholder="选择状态"-->
                    <!--                            clearable-->
                    <!--                        >-->
                    <!--                            <el-option-->
                    <!--                                v-for="item in nj_apply_status"-->
                    <!--                                :key="item.value"-->
                    <!--                                :label="item.label"-->
                    <!--                                :value="item.value"-->
                    <!--                            />-->
                    <!--                        </el-select>-->
                    <!--                    </el-form-item>-->
                    <el-form-item>
                        <el-button type="primary" @click="searchHandle">
                            <el-icon class="me-1">
                                <Search/>
                            </el-icon>
                            查询
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetQueryParamsHandle(queryParamsRef)">
                            <el-icon class="me-1">
                                <Refresh/>
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="warning" @click="exportHandleXlsx('办案区使用统计列表')">
                            <el-icon class="me-1">
                                <Download/>
                            </el-icon>
                            导出
                        </el-button>
                    </el-form-item>
                </el-col>
                <el-col :offset="18" :span="2">
                    <!--                    <el-form-item>-->
                    <!--                        <el-button type="primary" @click="getTableData">-->
                    <!--                            <el-icon class="me-1">-->
                    <!--                                <Search/>-->
                    <!--                            </el-icon>-->
                    <!--                            查询-->
                    <!--                        </el-button>-->
                    <!--                    </el-form-item>-->
                </el-col>
                <el-col :span="2">
                    <!--                    <el-form-item>-->
                    <!--                        <el-button @click="resetQueryParamsHandle(queryParamsRef)">-->
                    <!--                            <el-icon class="me-1">-->
                    <!--                                <Refresh/>-->
                    <!--                            </el-icon>-->
                    <!--                            重置-->
                    <!--                        </el-button>-->
                    <!--                    </el-form-item>-->
                </el-col>
                <el-col :span="2">
                    <!--                    <el-form-item>-->
                    <!--                        <el-button type="warning" @click="exportHandleXlsx('办案区使用统计列表')">-->
                    <!--                            <el-icon class="me-1">-->
                    <!--                                <Download/>-->
                    <!--                            </el-icon>-->
                    <!--                            导出-->
                    <!--                        </el-button>-->
                    <!--                    </el-form-item>-->
                </el-col>
            </el-row>
        </el-form>

        <el-table
            ref="tableDataRef"
            v-loading="loading"
            :data="tableData"
            :default-sort="defaultSort"
            border
            stripe
            :row-style="tableRowStyle"
            show-overflow-tooltip
            @sort-change="handleSortChange"
            @row-dblclick="handleDbClick"
        >
            <el-table-column type="index" width="50"/>
            <el-table-column :sort-orders="sortOrders" label="办案单位" prop="unitname" sortable="unitname"
                             width="120"/>
            <el-table-column :sort-orders="sortOrders" label="办案部门" prop="depname" sortable="depname" width="120"/>
            <el-table-column :sort-orders="sortOrders" label="所属职能部门" prop="dutyName" sortable="dutyName"
                             width="150"/>
            <el-table-column :sort-orders="sortOrders" label="承办人" prop="askName" sortable="askName" width="150"/>
            <el-table-column :sort-orders="sortOrders" label="办案区类型" prop="policeAreaType"
                             sortable="policeAreaType" width="150"/>
            <el-table-column :sort-orders="sortOrders" label="案件名称" prop="caseName" sortable="caseName"
                             width="150"/>
            <el-table-column :sort-orders="sortOrders" label="案件类别" prop="caseTypeName" sortable="caseTypeName"
                             width="150"/>
            <el-table-column :sort-orders="sortOrders" label="涉案人" prop="user_name" sortable="user_name"
                             width="120"/>
            <el-table-column :sort-orders="sortOrders" label="实际进入时间" prop="factIndate" sortable="factIndate"
                             width="180"/>
            <el-table-column :sort-orders="sortOrders" label="实际离开时间" prop="factOutdate" sortable="factOutdate"
                             width="180"/>
            <el-table-column :sort-orders="sortOrders" label="使用房间" prop="roomname" sortable="roomname"
                             width="150"/>
            <el-table-column :sort-orders="sortOrders" label="执勤法警" prop="fjName" sortable="fjName" width="150"/>
            <el-table-column :sort-orders="sortOrders" label="状态" prop="detailStateName" sortable="detailStateName"
                             width="150"/>
            <el-table-column label="操作">
                <template #default="scope">
                    <!--                    <router-link-->
                    <!--                        to="/PoliceWork/BAManage"-->
                    <!--                        class="el-button el-button&#45;&#45;primary el-button&#45;&#45;small is-link"-->
                    <!--                    >-->
                    <!--                        详情-->
                    <!--                    </router-link>-->

                    <!--                    <el-button-->
                    <!--                        type="primary"-->
                    <!--                        size="small"-->
                    <!--                        link-->
                    <!--                        v-if="scope.row.policeAreaType==='办案中心'"-->
                    <!--                        @click=""-->
                    <!--                    >-->
                    <!--                        详情{{ scope.row.policeAreaType }}-->
                    <!--                    </el-button>-->
                    <!--                    <router-link-->
                    <!--                        to="/PoliceWork/BAManage"-->
                    <!--                        class="el-button el-button&#45;&#45;primary el-button&#45;&#45;small is-link"-->
                    <!--                        v-if="scope.row.policeAreaType==='办案中心'"-->
                    <!--                    >-->
                    <!--                        详情-->
                    <!--                    </router-link>-->


                    <el-button
                        v-if="scope.row.policeAreaType==='办案中心'"
                        link
                        size="small"
                        type="primary"
                        @click="BAManageRef.showDetail(scope.row,'1')"
                    >
                        详情
                    </el-button>

                    <el-button
                        v-if="scope.row.policeAreaType==='自侦办案区'"
                        link
                        size="small"
                        type="primary"
                        @click="BAManageRef.showDetail(scope.row,'2')"
                    >
                        详情
                    </el-button>
                    <!--                    <router-link-->
                    <!--                        to="/PoliceWork/ZZManage"-->
                    <!--                        class="el-button el-button&#45;&#45;primary el-button&#45;&#45;small is-link"-->
                    <!--                        v-if="scope.row.policeAreaType==='自侦办案区'"-->
                    <!--                    >-->
                    <!--                        详情-->
                    <!--                    </router-link>-->

                    <el-button
                        v-if="scope.row.policeAreaType==='指定居所'"
                        link
                        size="small"
                        type="primary"
                        @click="BAManageRef.showDetail(scope.row,'3')"
                    >
                        详情
                    </el-button>
                    <!--                    <router-link-->
                    <!--                        to="/PoliceWork/ZJManage"-->
                    <!--                        class="el-button el-button&#45;&#45;primary el-button&#45;&#45;small is-link"-->
                    <!--                        v-if="scope.row.policeAreaType==='指定居所'"-->
                    <!--                    >-->
                    <!--                        详情-->
                    <!--                    </router-link>-->

                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            v-model:limit="paging.pageSize"
            v-model:page="paging.pageNum"
            :total="total"
            @pagination="getTableData"
        />
    </div>
    <BAManage ref="BAManageRef"/>
</template>

<script setup>

import {getCurrentInstance, useTemplateRef} from 'vue';
import DepartmentCascader from '@/components/DepartmentCascader/DepartmentCascader.vue';
import {roomStateList} from '@/api/BAApply/BAApply.js';
import useUserStore from '@/store/modules/user.js';
import {listDept} from '@/api/system/dept.js';
import {getSendPoliceTableList} from '@/api/StatisticAnalysis/UseChart.js';
import PageEnum from '@/enum/PageEnum.js';
import {useRoute} from 'vue-router';
import {exportHandleXlsx} from '@/utils/export.js';
import {Download} from '@element-plus/icons-vue';
import BAManage from '@/components/BAManageDetail/BAManageDetail.vue';

const {proxy} = getCurrentInstance();
const {
    nj_total_by,
    nj_policearea_type,
    nj_anjian_type,
    nj_apply_status
} = proxy.useDict('nj_total_by', 'nj_policearea_type', 'nj_anjian_type', 'nj_apply_status')


const userUnit = useUserStore().info.unitId;
const route = useRoute()
const {dutyDept, unitID, status} = route.query
const queryParamsRef = useTemplateRef('queryParamsRef');
const BAManageRef = useTemplateRef('BAManageRef');
const tableDataRef = useTemplateRef('tableDataRef');

const searchTime = ref([]);
const childUnitId = ref(false)
const queryParams = ref({
    // 办案单位
    unitId: Number(unitID) || userUnit || '',
    // 含下级单位
    childUnitId: '',
    // 办案部门
    depId: '',
    // 所属职能部门
    dutyDept: dutyDept || '',
    // 承办人
    askerName: '',
    // 办案区类型
    type: '',
    // 案件名称
    caseName: '',
    // 案件类别
    caseType: '',
    // 涉案人
    userName: '',
    // 实际进入时间
    params: {
        beginTime: '',
        endTime: ''
    },
    // 使用房间
    roomId: '',
    // 执勤法警
    roomCheckId: '',
    // 状态
    status: status || '',
});

// 房间列表
const roomList = ref([])
// 办案区部门
const BAApplydepList = ref([])

const loading = ref(false)
const total = ref(0)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE,
    isAsc: 'ascending',
    orderByColumn: 'unitname'
})
const defaultSort = ref({prop: 'unitname', order: 'descending'});
const sortOrders = reactive(['descending', 'ascending'])
const tableData = ref([]);

onMounted(() => {
    getRoomList()
    getBAApplyDepList()
    getTableData()
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
/** 排序触发事件 */
const handleSortChange = (column, prop, order) => {
    paging.value.orderByColumn = column.prop;
    paging.value.isAsc = column.order;
    getTableData();
}
const childUnitIdSearchHandle = (e) => {
    queryParams.value.childUnitId = e ? queryParams.value.unitId : '';
    getTableData()
}

const searchHandle = () => {
    queryParams.value.status = '';
    getTableData();
}

const getTableData = async () => {
    loading.value = true;
    const res = await getSendPoliceTableList(queryParams.value, paging.value)
    total.value = res.total
    tableData.value = res.rows
    loading.value = false;
}

// 获取房间列表
const getRoomList = async () => {
    const res = await roomStateList({
        unitId: userUnit,
        policeAreaType: 1
    })
    res.data.map(item => {
        item.baseRoomList.map(room => {
            roomList.value.push({
                value: room.roomId,
                label: room.roomName
            })
        })
    })
}

// 获取办案部门
const getBAApplyDepList = async () => {
    const res = await listDept({})

    res.data.filter(item => !item.isUnit && item.parentId === userUnit).map(item => {
        BAApplydepList.value.push({
            label: item.deptName,
            value: item.deptId
        })
    })
}
// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }

    getTableData()
}

// 重置搜索
const resetQueryParamsHandle = async (elForm) => {
    if (!elForm) return
    elForm.resetFields()
    searchTime.value = []
    queryParams.value.params.beginTime = '';
    queryParams.value.params.endTime = '';
    queryParams.value.unitId = '';
    queryParams.value.dutyDept = '';
    tableDataRef.value.sort(defaultSort.value.prop, defaultSort.value.order);
    await getTableData()
}

const handleDbClick = (row) => {
    BAManageRef.value.showDetail(row,'3')
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

</style>